<script setup>
import { ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { useUserStore } from "@/stores";
import { updateUserInfo } from "@/api/userCenter";
import { upload } from "@/api/file";

// 抽屉开关
const visibleDrawer = ref(false);
const userStore = useUserStore();

// 定义表单数据
const userInfo = ref({
  realName: "", //姓名
  phone: "", //手机号
  email: "", //邮箱
  address: "", //详细地址
  avatar: "", //头像
});
const handleOpen = () => {
  visibleDrawer.value = true;
  // 初始化表单数据
  userInfo.value.realName = userStore.userInfo.realName;
  userInfo.value.phone = userStore.userInfo.phone;
  userInfo.value.email = userStore.userInfo.email;
  userInfo.value.address = userStore.userInfo.address;
  userInfo.value.avatar = userStore.userInfo.avatar;
};

// 预览头像
const imageUrl = ref("");
// 保存选中的文件对象
const selectedFile = ref(null);

// 上传文件选择后的回调
const onUploadFile = (file) => {
  selectedFile.value = file.raw;
  // 创建一个URL对象，将选择的文件转换为URL
  imageUrl.value = URL.createObjectURL(file.raw);
};

// 上传图片限制
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("必须是jpg/png格式的图片");
    return false;
  }
  return true;
};

// 提交表单
const onSubmit = async () => {
  // 修正拼写错误：userInfo.valeu -> userInfo.value
  console.log(userInfo.value);

  // 1.如果有图片上传,就上传头像到minio获取图片的url
  if (imageUrl.value) {
    const formData = new FormData();
    formData.append("file", selectedFile.value);
    const res = await upload(formData);
    //console.log(res);
    userInfo.value.avatar = res.data.data;
  }

  console.log(userInfo.value);
  const res = await updateUserInfo(userInfo.value);
  ElMessage({
    message: "修改成功",
    type: "success",
  });
  // 更新仓库数据
  userStore.setUserInfo();
  // 清空预览头像信息，避免头像重复提交到minio
  imageUrl.value = "";
};

defineExpose({
  handleOpen,
});
</script>

<template>
  <el-drawer
    v-model="visibleDrawer"
    title="基本资料"
    direction="rtl"
    size="40%"
  >
    <el-card style="max-width: 100%">
      <el-form
        ref="ruleFormRef"
        style="max-width: 400px"
        :model="userInfo"
        label-width="100px"
      >
        <el-form-item>
          <el-upload
            class="avatar-uploader"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="onUploadFile"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="imageUrl || userInfo.avatar"
              :src="imageUrl || userInfo.avatar"
              class="avatar"
            />
            <img v-else src="@/assets/avatar.jpg" width="150" />
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="userStore.userInfo.username" disabled />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="userInfo.realName" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="userInfo.phone" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userInfo.email" />
        </el-form-item>
        <!-- 修正绑定的字段：status -> address -->
        <el-form-item label="地址">
          <el-input v-model="userInfo.address" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交修改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-drawer>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 150px;
      height: 150px;
      display: block;
      object-fit: cover; /* 图片自适应容器 */
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
  }
}
</style>
